<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="${BaseContext}">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频管理</title>
<!--在线加载bootstrap相关的css样式和js-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>
<script type="text/javascript" src="static/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {

		$(".navbar-nav li").mouseover(function() {
			$(this).addClass("active");
		});
		$(".navbar-nav li").mouseout(function() {
			$(this).removeClass("active");
		});
		$("#input1").change(function() {

			var checked_value = $(this).attr("checked");
			if (checked_value == "checked") {
				$("#table1 input").attr("checked", "checked");
			} else {
				$("#table1 input").removeAttr("checked");
			}
		});
		$("#table1 input").change(
				function() {
					var inputs = $("#table1 input:checked").not(
							$("#table1 input[id]"));
					$(".badge").html(inputs.length);
				});
		$("#queryDelete").click(	
		function(){
			var inputs = $("#table1 input:checked").not(
					$("#table1 input[id]"));
			var id = new Array();
			$(inputs).each(function(i,obj){
				id[i]=obj.value;
			});
			ids = id.join(",");
			$.post("admin/video/queryDelete",{"ids":ids},function(data){
				location.href="admin/video/manage?pageNum="+data;
			},"text");
		}
			
		);

	})
</script>
<style type="text/css">
.jumbotron {
	width: 90%;
	margin: 0 auto;
	padding-left: 10%;
	border-radius: 5px;
	margin-top: -60px;
}

#div1 {
	margin-top: 20px;
}

.hiddenTr {
	vertical-align: center;
	height: 88px;
	overflow: hidden;
}

#table1 tr th {
	text-align: center;
	vertical-align: top;
}

</style>
</head>

<body>
	<div class="container">
		<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand">视频管理系统</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="admin/video/manage">视频管理<span class="sr-only">(current)</span></a></li>
					<li><a href="admin/speaker/manage">主讲人管理</a></li>
					<li><a href="admin/course/manage">课程管理</a></li>
					<li><a href="admin/statistics/show">统计分析</a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li><a href="admin/logout"><span>${admin.login_name }</span><span
							class="glyphicon glyphicon-log-out" aria-hidden="true"></span></a></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid --> </nav>
		<div class="jumbotron">
			<h2>视频列表-视频管理</h2>
		</div>
		<div class="container" id="div1">
			<a href="admin/video/forAddVideo"><button type="button"
					class="btn btn-primary">添加视频</button> </a>
			<button id="queryDelete" class="btn btn-primary" type="button">
				批量删除<span class="badge">0</span>
			</button>
			<form class="navbar-form navbar-right" role="search"
				action="admin/video/manage">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="视频标题"
						name="video_title">
				</div>
				<div class="form-group">
					<select class="form-control" name="speaker_id">
						<option value="">请选择主讲人</option>
						<c:forEach items="${speakers }" var="speaker">
							<option value="${speaker.id }">${speaker.speaker_name }</option>
						</c:forEach>
					</select>
				</div>
				<div class="form-group">
					<select class="form-control" name="course_id">
						<option value="">请选择课程</option>
						<c:forEach items="${courses }" var="course">
							<option value="${course.id }">${course.course_name }</option>
						</c:forEach>
					</select>
				</div>
				<button type="submit" class="btn btn-primary">搜索</button>
			</form>
		</div>
		<div class="container" style="height: 570px">
			<table class="table table-hover" id="table1">
				<tr>
					<th><input type="checkbox" id="input1" /></th>
					<th>序号</th>
					<th>名称</th>
					<th>介绍</th>
					<th>讲师</th>
					<th>课程</th>
					<th>时长(秒)</th>
					<th>播放次数</th>
					<th>编辑</th>
					<th>删除</th>
				</tr>

				<c:forEach items="${videos }" var="video" varStatus="i">
					<tr class="hiddenTr">
						<td><input type="checkbox" value="${video.id }" name="id" /></td>
						<td>${i.count+(pageNum-1)*6 }</td>
						<td>${video.video_title }</td>
						<td>${video.video_descr }</td>
						<td>${video.speaker.speaker_name }</td>
						<td>${video.course.course_name }</td>

						<td>${video.time}</td>


						<td>${video.video_play_times }</td>


						<td><a
							href="admin/video/edit?id=${video.id }&pageNum=${pageNum}"><span
								class="glyphicon glyphicon-edit" aria-hidden="true"></span></a></td>
						<td><a
							href="admin/video/deleteVideo?id=${video.id }&pageNum=${pageNum}"><span
								class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
					</tr>

				</c:forEach>

			</table>
		</div>
	</div>
	<div class="container">
		<nav aria-label="..." class="navbar-right" id="nav1">
		<ul class="pagination">
			<li><a
				href="admin/video/manage?pageNum=${pageNum-1 }&video_title=${vid.video_title}&speaker_id=${vid.speaker_id}&course_id=${vid.course_id}"
				aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
			<c:forEach var="page_list" begin="1" end="${pages }">
				<li><a
					href="admin/video/manage?pageNum=${page_list}&video_title=${vid.video_title}&speaker_id=${vid.speaker_id}&course_id=${vid.course_id}">${page_list }
						<span class="sr-only">(current)</span>
				</a></li>
			</c:forEach>
			<li><a
				href="admin/video/manage?pageNum=${pageNum+1 }&video_title=${vid.video_title}&speaker_id=${vid.speaker_id}&course_id=${vid.course_id}"
				aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
			</li>
		</ul>
		</nav>
		<div style="clear: both;"></div>
	</div>
</body>
</html>
